<template>
	<view class="detail">
		<view
		  class="back"
		  :style="{
			top: marginTop + 'px',
			width: backWith + 'px',
			height: backHeight + 'px',
		  }">
			<view class="back-btn" @tap="goBack">
				<image src="../../../static/bank-icon.png" mode=""></image>
			</view>
			<view class="">
				充电桩详情
			</view>
			<view class="back-emty">
			</view>
		</view>
		<view class="title">
			<text>{{equipmentInfo.socketName}}</text>
			<br />
			<text>枪编号 {{equipmentInfo.socketCode}}</text>
		</view>
		
		<!-- 预约中 -->
		<view v-if="socketStatus==='RESERVATION_LOCK'" class="fault-pre">
			<view class="fault-com2">
				<view class="fault-text">
					预约中
				</view>
				<image src="../../../static/ic_air.png" class="loadingEight" mode=""></image>
			</view>
		</view>
	    <!-- 充电中、启动中 -->
		<view v-else-if="(socketStatus==='CHARGING' || socketStatus==='RUNNING') && outTradeId" class="fault-charging">
			<view class="fault-com2">
				<view class="fault-text">
					<!-- <text>{{
						socketStatus==='CHARGING' ? '充电中' : '启动中'
					}}</text> -->
					<view class="wave"></view>
				</view>
				<view class="fault-text2">
					<view class="wave2"></view>
				</view>
				<view class="status-text">{{socketStatus==='CHARGING' ? '充电中' : '启动中'}}</view>
				<image src="../../../static/ic_airgreen.png" class="loadingEight" mode=""></image>
			</view>
	    </view>
		<view v-else class="fault-com">
			<view class="fault-com2">
				<view class="fault-text" :class="socketStatusEnum[socketStatus].class">
					{{socketStatusEnum[socketStatus].text}}
				</view>
				<view class="loadingEight">
				   <span></span>
				</view>
			</view>
		</view>
		
		<!-- 充电过程数据 -->
		<view class="charging-info" v-if="socketStatus==='CHARGING' && outTradeId">
			<view class="charging-time">
				<view>
					<text class="value">{{orderProcess.duration}}</text>
					<br />
					<text class="type">充电时长(分)</text>
				</view>
				<view class="line">
					
				</view>
				<view style="text-align: right;">
					<text class="value">{{orderProcess.electricity}}</text>
					<br />
					<text class="type">充电电量(度)</text>
				</view>
			</view>
			<view class="line" style="margin: 24rpx 0;" v-if="socketStatus==='CHARGING' && outTradeId">
				
			</view>
			<view class="charging-time" v-if="socketStatus==='CHARGING'  && outTradeId">
				<view>
					<text class="value" style="font-size: 40rpx;">{{orderProcess.outputPower}}</text>
					<br />
					<text class="type">输出功率(kW)</text>
				</view>
				<view class="line">
					
				</view>
				<view style="text-align: center;">
					<text class="value" style="font-size: 40rpx;">{{orderProcess.outputCurrent}}</text>
					<br />
					<text class="type">输出电流(A)</text>
				</view>
				<view class="line">
					
				</view>
				<view style="text-align: right;">
					<text class="value" style="font-size: 40rpx;">{{orderProcess.outputVoltage}}</text>
					<br />
					<text class="type">输出电压(V)</text>
				</view>
			</view>
		</view>
		
		<view class="charging-info" v-if="socketStatus==='RESERVATION_LOCK'">
			<view class="charging-time">
				<view>
					<text style="font-size: 40rpx;" class="value">{{analysis(scheduleJson.startTime)}}</text>
					<br />
					<text class="type">启动预约时间</text>
				</view>
				<view class="line">
					
				</view>
				<view style="text-align: right;">
					<text style="font-size: 40rpx;" class="value">{{scheduleJson.endTime ? analysis(scheduleJson.endTime) :"不限"}}</text>
					<br />
					<text class="type">预约停止时间</text>
				</view>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view @click="showCloseModal = true" class="cancelBtn"  v-if="socketStatus==='CHARGING' && outTradeId">
			<img :src="stopChargeLogo" alt="">
			<text>结束充电</text>
		</view>
		<view @click="canelSchedule" :class = "{'cancelBtn': (isMainPile || isAppointmentPerson), 'cancelBtnDisable': !(isMainPile || isAppointmentPerson) }"  v-else-if="socketStatus==='RESERVATION_LOCK'">
			<img :src="stopChargeLogo" alt="">
			<text>取消预约</text>
		</view>
		<view v-else-if="socketStatus==='IDLE' || socketStatus==='ONLY_CONNECTED'" class="btnList">
			<view @click="postStartDevice" >
				<img :src="startCharginLogo" alt="">
				<text>启动充电</text>
			</view>
			<view  @click="pickerShow=true" class="btn2">
				<img :src="subscribeCharginLogo" alt="">
				<text>预约充电</text>
			</view>
		</view>
		<view v-else class="btnList greyOut">
			<view>
				<img :src="startCharginLogo" alt="">
				<text>启动充电</text>
			</view>
			<view style="margin-left: 16rpx;">
				<img :src="subscribeCharginLogo" alt="">
				<text>预约充电</text>
			</view>
		</view>
		<u-modal :show="showCloseModal" @confirm="onCloseModalConfirm" @cancel="showCloseModal=false" showCancelButton="true" cancelText="取消" title="温馨提示" :content='contentClose'></u-modal>
		<u-modal :show="showModal" @confirm="onConfirm" @cancel="showModal=false" showCancelButton="true" cancelText="取消" title="温馨提示" :content='content'></u-modal>
		<!-- 弹框：预约时间 -->
		<u-popup :show="pickerShow" :round="12" @close="pickerShow=false" mode="bottom">
			<view class="pickerTitle">
				<view class="titleText">
					<u-icon @click="pickerShow=false" class="icon" name="close"></u-icon>
					<text>预约充电</text>
				</view>
				<view class="timeText">
					<text>开始时间</text>
					<text>→</text>
					<text>结束时间</text>
				</view>
			</view>
			<view style="display: flex;">
				<picker-view v-if="true" indicator-class="indicatorStyle" @change="bindChange($event,'scheduleStartTime')" class="picker-view">
					<picker-view-column class="picker-view-column">
						<view :key="0">今天</view>
						<view :key="1">明天</view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view  v-for="(item,index) in hour" :key="index">{{index}}点</view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view  v-for="(item,index) in point" :key="index">{{index}}分</view>
					</picker-view-column>
				</picker-view>
				<picker-view v-if="true" indicator-class="indicatorStyle" @change="bindChange($event,'scheduleStopTime')" class="picker-view">
					<picker-view-column class="picker-view-column">
						<view :key="0">不限</view>
						<view :key="1">今天</view>
						<view :key="2">明天</view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view  v-for="(item,index) in hour" :key="index">{{index}}点</view>
					</picker-view-column>
					<picker-view-column class="picker-view-column">
						<view  v-for="(item,index) in point" :key="index">{{index}}分</view>
					</picker-view-column>
				</picker-view>
				
			</view>
			<view class="scheduleBtn" @click="scheduleBtn">
				确定
			</view>
		</u-popup>
	    <!-- 弹框：成功失败提示 -->
		<PopUp @closePopup="closePopup" :showPopup='showPopup' :equipmentStatus='equipmentStatus' :failureReason='failureReason'/>
	</view>
</template>

<script>
	// 订单状态，
	// RUNNING(1, "启动中"),
	// RUN_FAIL(2, "启动失败"),
	// CHARGING(3, "（启动成功）充电中"),
	// FINISH(5, "充电完成"),
	// STOPPING(6, "停止中"),
	
	// 充电枪状态
	// OFFLINE(0, "离线", 6),
	// FAULT(1, "故障", 5),
	// IDLE(2, "空闲", 0),
	// CHARGING(3, "插枪（充电中）", 3),
	// ONLY_CONNECTED(4, "插枪（未工作）", 2)
	import PopUp from "../../component/popUp/index.vue"
	import subscribeCharginLogo from "../../../static/subscribeCharginLogo.png"
	import startCharginLogo from "../../../static/startCharginLogo.png"
	import stopChargeLogo from "../../../static/stopChargeLogo.png"
	import { findEquipment, startDevice, stopDevice, cancelSchedule, scheduleStart,queryOrderStatus, queryOrderProcess } from "./indexServ.js"
	export default {
		name: 'template',
		data() {
			return {
				subscribeCharginLogo,startCharginLogo,stopChargeLogo,
				marginTop: 0,
				backHeight: 0,
				backWith: 0,
				showPopup:false,
				equipmentStatus:'startSuccess',
				failureReason:'',
				socketStatus:'IDLE',
				socketStatusEnum: {
					OFFLINE: { text: '离线',class:'OFFLINE' },
					FAULT: { text: '故障' ,class:'FAULT'},
					IDLE: { text: '空闲',class:'IDLE'},
					ONLY_CONNECTED: { text: '已插枪',class:'IDLE'},
					CHARGING: { text: '充电中',class:'IDLE'},
					RESERVATION_LOCK: { text: '预约中'},
					STOPPING: {text: '停止中', class:'FAULT'}
				},
				content: "您是否要取消预约?",
				contentClose:'您是否要停止充电',
				socketCode:'',
				equipmentInfo:{},
				outTradeId: '',
				timer: null,
				orderProcess: {},
				pickerShow: false,
				hour:[...new Array(25).keys()].slice(1,25),
				point:[...new Array(61).keys()].slice(1,61),
				scheduleStartTime:[0,0,0],
				scheduleStopTime:[0,0,0],
				isMainPile: false, // 是否是桩主
				isAppointmentPerson: true, // 是否是本人预约
				scheduleJson:{},
				showModal:false,
				showCloseModal:false,
			}
		},
		components:{
			PopUp,
		},
		onLoad(option) {
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync();
			// 胶囊按钮位置信息
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			this.marginTop = menuButtonInfo.top;
			this.backWith = systemInfo.screenWidth;
			this.backHeight = menuButtonInfo.height;
			this.socketCode = option.socketCode
		},
		mounted() {
			// 查询设备详情
			this.getFindEquipment()
		},
		methods: {
			onConfirm(){
				this.postCancelSchedule()
				this.showModal = false
			},
			onCloseModalConfirm(){
				this.postStopDevice()
				this.showCloseModal = false
			},
			closePopup(data){
				this.showPopup = false
				if(data.closePopup){
					console.log("走到这啦")
					this.getFindEquipment()
				}
			},
			// 查询设备详情
		    async getFindEquipment(){
				clearInterval(this.timer)
				let res = await findEquipment({socketCode:this.socketCode})
				const {code, message, body} = res
				if(code === '0000000'){
					this.equipmentInfo = body
					this.socketStatus = body.socketStatus
					this.outTradeId = body.outTradeId
					// 预约中状态特殊处理
					if (body?.scheduleJson?.memberId) {
						this.scheduleJson = body.scheduleJson
						this.socketStatus = 'RESERVATION_LOCK'
						// 非本人预约
						if (body.memberId !== body.scheduleJson.memberId) {
							this.isAppointmentPerson = false
						}
					}
					if (body.memberId === body.ownMemberId) {
						this.isMainPile = true
					}
					if (this.outTradeId && body.socketStatus === 'CHARGING') {
						this.postQueryOrderProcess()
						this.queryProcess()
					}
				} else {
					this.$u.toast(message)
				}
			},
			// 启动充电
			async postStartDevice() {
				this.showPopup =true
				this.equipmentStatus='starting'
				this.failureReason= ""
				let res = await startDevice({socketCode:this.socketCode})
				
				const {code, message, body} = res
				if(code === "0000000") {
					this.outTradeId = body.outTradeId
					this.postQueryOrderStatus(body.outTradeId)
					this.querStatus(body.outTradeId)
					
				} else {
					this.equipmentStatus='startFailure'
					this.failureReason=message
					// this.$u.toast(message)
				}
			},
			// 结束充电
			async postStopDevice() {
				this.showPopup =true
				this.equipmentStatus="closeCanceling"
				if (this.socketStatus !== "CHARGING") { return }
				let res = await stopDevice({outTradeId:this.outTradeId})
				const {code, message, body} = res
				if(code === "0000000") {
					this.postQueryOrderStatus(this.outTradeId)
					this.querStatus(this.outTradeId)
				} else {
					this.equipmentStatus='stopFailure'
					this.failureReason=message
				}
			},	
			// 开始预约
			async postScheduleStart(start,stop) {
				let res = await scheduleStart({socketCode:this.socketCode,startTime:start,endTime:stop})
				const {code, message, body} = res
				console.log(code === "0000000")
				if(code === "0000000") {
					this.pickerShow = false
					this.showPopup =true
					this.equipmentStatus="subscribeSuccess"
					this.getFindEquipment()
				} else {
					this.pickerShow = false
					this.showPopup = true
					this.equipmentStatus="subscribeFailure"
					this.failureReason=message
				}
			},
			// 取消预约
			canelSchedule() {
				if (this.socketStatus !== "RESERVATION_LOCK" ||
				   (!(this.isMainPile || this.isAppointmentPerson) && this.socketStatus === "RESERVATION_LOCK")) { 
					return 
				}
				this.showModal = true
			},
			// 取消预约确认
			async postCancelSchedule() {
				let res =await cancelSchedule({socketCode:this.socketCode})
				const {code, message, body} = res
				if(code === "0000000") {
					this.showPopup =true
					this.equipmentStatus="subscribeCancelSuccess"
					this.getFindEquipment()
				} else {
					this.showPopup = true
					this.equipmentStatus="subscribeCancelFailure"
					this.failureReason=message
				}
			},		
			// 轮询查询订单状态
			querStatus(outTradeId){
				let num = 12
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					if (num-- > 0) {
						console.log("---setInterval--")
						// 订单状态
						this.postQueryOrderStatus(outTradeId)
					} else{
						clearInterval(this.timer)
						this.goBack()
					}
				}, 5000)
			},
			// 订单状态 outTradeId
			async postQueryOrderStatus(outTradeId) {
				let res = await queryOrderStatus({outTradeId: outTradeId})
				const {code, message, body} = res
				if (code === '0000000') {
					this.socketStatus = body.orderStatus
					if (body.orderStatus === 'FINISH') {
						this.showPopup =false
						clearInterval(this.timer)
						// this.getFindEquipment()
						this.goBack()
					}
					if (body.orderStatus === 'RUN_FAIL') {
						this.equipmentStatus='startFailure'
						this.failureReason=body.endReason
						clearInterval(this.timer)
						// this.getFindEquipment()
					}
					if ( body.orderStatus === 'CHARGING') {
						this.showPopup =false
						clearInterval(this.timer)
						// this.getFindEquipment()
						this.postQueryOrderProcess()
						this.queryProcess()
					}
				} else {
					this.$u.toast(message)
				}
				
			},	
			queryProcess() {
				clearInterval(this.timer)
				this.timer = setInterval(() => {
					this.postQueryOrderProcess()
				}, 60000)
			},		
			// 查看订单过程数据  outTradeId
			async postQueryOrderProcess() {
				let res = await queryOrderProcess({outTradeId:this.outTradeId})
				console.log("postQueryOrderProcess")
				console.log(res)
				const {code, message, body} = res
				if (code === '0000000') {
					this.orderProcess = body
					if (body.orderStatus === 'FINISH') {
						this.getFindEquipment()
					}
				} else {
					// this.$u.toast(message)
				}
			},
			dateTrans(date) {
				let _date = new Date(parseInt(date));//13位
				// let _date = new Date(parseInt(date) * 1000);//10位
				let y = _date.getFullYear();
				let m = _date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				let d = _date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = _date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let minute = _date.getMinutes();
				let second = _date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute; second = second < 10 ? ('0' + second) : second;
				let dates = y + '-' + m + '-' + d//年月日时分秒
				return dates;
			},
			analysis(date) {
				let _date = new Date(parseInt(date));//13位
				// let _date = new Date(parseInt(date) * 1000);//10位
				let y = _date.getFullYear();
				let m = _date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				let d = _date.getDate();
				d = d < 10 ? ('0' + d) : d;
				let h = _date.getHours();
				h = h < 10 ? ('0' + h) : h;
				let minute = _date.getMinutes();
				let second = _date.getSeconds();
				minute = minute < 10 ? ('0' + minute) : minute; second = second < 10 ? ('0' + second) : second;
				let dates =m + "-" +d +" "+h + ':' + minute//年月日时分秒
				return dates;
			},
			//检查时间
			timeCheck(startTime,stopTime){
				const currentTime = dayjs(new Date()).valueOf()
				if(currentTime>startTime){
					this.$u.toast("开始时间需大于当前时间")
					return false
				}else if(stopTime!=="" && startTime>stopTime){
					this.$u.toast("开始时间需大于结束时间")
					return false
				}else if((stopTime-startTime)>1000*3600*24){
					this.$u.toast("充电时长设置不可超过24小时")
					return false
				}
				return true
			},
			// 预约时间确认
			scheduleBtn(){
				//今天年月日
				const today = dayjs().format('YYYY-MM-DD')
				//明天年月日
				const Tomorrow = dayjs().add(1, 'day').format('YYYY-MM-DD')
				//年月日时分
				const start = `${this.scheduleStartTime[0]===0 ? today:Tomorrow} ${this.scheduleStartTime[1].toString().padStart(2, '0')}:${this.scheduleStartTime[2].toString().padStart(2, '0')}:00`

				let startTimestamp = dayjs(start).valueOf()
				let stopTimestamp = ""
				
				if(this.scheduleStopTime[0]!==0){
					const stop = `${this.scheduleStopTime[0]===1 ? today:Tomorrow} ${this.scheduleStopTime[1].toString().padStart(2, '0')}:${this.scheduleStopTime[2].toString().padStart(2, '0')}:00`
					stopTimestamp = dayjs(stop).valueOf()
				}
				const timeCheck = this.timeCheck(startTimestamp,stopTimestamp)
				timeCheck ? this.postScheduleStart(startTimestamp,stopTimestamp) : ''
			},
			bindChange(e,time){
				this[time] = e.detail.value
				console.log(this[time])
			},
		    goBack() {
		    	uni.navigateBack({
		    		delta: 1
		    	})
		    },
		},

	}
</script>

<style  lang="scss" scoped>
    .wave{
        background:pink;
        border-radius:32%;
        width:120*2rpx;
        height:120*2rpx;
        position:absolute;
        left:50%;
        bottom:68*2rpx;
        animation: go 8s infinite linear;
    }
	.wave2{
	    background:#D2FFEA ;
	    border-radius:32%;
	    width:120*2rpx;
	    height:120*2rpx;
	    position:absolute;
	    left:50%;
	    bottom:68*2rpx;
	    animation: go 10s infinite linear;
	}
	.fault-text2{
		width: 114*2rpx;
		height: 114*2rpx;
		border: 3*2rpx solid #3ADEA2;
		overflow: hidden;
		// 1A8DFF
		background: #3ADEA2;
		border-radius: 50%;
		position: absolute;
		z-index: 20;
		left: 60*2rpx;
		top: 60*2rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20*2rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: rgba(118, 118, 127, 0);
	}
    @keyframes go {
        0% {
            transform: translate(-50%, 0) rotateZ(0deg);
        }
        50% {
            transform: translate(-50%, -2%) rotateZ(180deg);
        }
        100% {
            transform: translate(-50%, 0%) rotateZ(360deg);
        }
    }
	.pickerTitle{
		width: 100%;
		background: #FFFFFF;
		border-radius: 12*2rpx 12*2rpx 0*2rpx 0*2rpx;
		overflow: hidden;
		.titleText{
			padding-left: 16*2rpx;
			display: flex;
			width: 100%;
			height: 44*2rpx;
			background: #FFFFFF;
			font-size: 16*2rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 44*2rpx;
			text-align: center;
			margin: 0;
			text{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
			}
		}
		.timeText{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 24*2rpx 48*2rpx 0 48*2rpx ;
			font-size: 15*2rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.detail{
		width: 100%;
		height: 100vh;
		background-image: url("");
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		.back{
			position: fixed;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 12*2rpx;
			box-sizing: border-box;
			color: #fff;
			.back-btn{
				width: 20*2rpx;
				height: 20*2rpx;
				image{
					width:20*2rpx;
					height: 20*2rpx;
				}
			}
			.back-emty{
				width: 20*2rpx;
				height: 20*2rpx;
			}
		}
		.title{
			text-align: center;
			margin-top: 126*2rpx;
			margin-bottom: 52*2rpx;
			:nth-child(1){
				font-size: 18*2rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
			}
			:nth-child(3){
				font-size: 14*2rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B4B0B7;
			}
		}
		.btnList{
			width: calc(100% - 64*2rpx);
			display: flex;
			position: fixed;
			bottom: 78*2rpx;
			view{
				width: 151*2rpx;
				height: 56*2rpx;
				background: #09AB7A;
				border-radius: 49*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 16*2rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				flex-grow: 1;
				img{
					width: 24*2rpx;
					height: 24*2rpx;
					margin-right: 8*2rpx;
				}
			}
			.btn2{
				background-color: #1A8DFF;
				margin-left: 8*2rpx;
			}
			
		}
		.cancelBtn{
			width: calc(100% - 176*2rpx);
			height: 56*2rpx;
			background: #FF4242;
			border-radius: 49*2rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16*2rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			position: absolute;
			bottom: 78*2rpx;
			img{
				width: 24*2rpx;
				height: 24*2rpx;
				margin-right: 8*2rpx;
			}
		}
		.cancelBtnDisable{
			width: calc(100% - 176*2rpx);
			height: 56*2rpx;
			background: #79757E;
			color: #999999;
			border-radius: 49*2rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 16*2rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			position: absolute;
			bottom: 78*2rpx;
			img{
				width: 24*2rpx;
				height: 24*2rpx;
				margin-right: 8*2rpx;
			}
		}
		.greyOut{
			view{
				background: #79757E;
				color: #999999;
			}
			.btn2{
				background: #79757E;
			}
		}
		.charging-info{
			width: calc(100% - 64*2rpx);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			bottom: 186*2rpx;
			.charging-time{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12*2rpx 0 16*2rpx;
				.value{
					font-size: 28*2rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #FFFFFF;
					margin-bottom: 4*2rpx;
				}
				.type{
					font-size: 13*2rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B4B0B7;
				}
				view{
					width: 49%;
				}
				.line{
					width: 1*2rpx;
					height: 30*2rpx;
					background-color:  #8A8491;
				}
			}
			.line{
				width: 100%;
				height: 1*2rpx;
				background-color:  #8A8491;
			}
		}
	}
	.picker-view {
		width: 100%;
		height: 120*2rpx;
		margin-top: 20*2rpx;
		z-index: 10;
		background-color: #FFFFFF;
		padding: 0 28*2rpx;
		box-sizing: border-box;
		.picker-view-column{
			min-width:40*2rpx;
			text-align: center;
			display: flex;
			align-items: center;
			padding-left: 10*2rpx;
		}
	}
	/deep/ .picker-view-column{
		flex:0;
		overflow:auto;
		z-index: 2;
		view{
			font-size: 18*2rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 43*2rpx;
		}
	}
	/deep/ .indicatorStyle{
		// z-index: 1;
		// width: 319*2rpx;
		height: 43*2rpx;
	}
	.scheduleBtn{
		width: 351*2rpx;
		height: 44*2rpx;
		background: #1A8DFF;
		border-radius: 8*2rpx;
		margin: 0 auto;
		margin-top: 63*2rpx;
		margin-bottom: 42*2rpx;
		font-size: 16*2rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 44*2rpx;
		text-align: center;
	}
	.fault-com{
		width: 280*2rpx;
		height: 280*2rpx;
		// opacity: 0.2;
		border: 2*2rpx solid rgba(138, 132, 145, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.fault-com2{
			width: 240*2rpx;
			height: 240*2rpx;
			// opacity: 0.4;
			border: 2*2rpx solid rgba(138, 132, 145, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.fault-text{
				width: 120*2rpx;
				height: 120*2rpx;
				width: 120*2rpx;
				height: 120*2rpx;
				border-radius: 50%;
				position: absolute;
				left: 60*2rpx;
				top: 60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20*2rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				
			}
			.OFFLINE{
				background: linear-gradient(180deg, #D3D0D0 0%, #A39FA5 100%);
				color: #666666;
			}
			.FAULT{
				color: #FF4242;
				background: linear-gradient(180deg, #FFF8F8 0%, #FFE0E0 100%);
			}
			.IDLE{
				background: linear-gradient(180deg, #F6FFFA 0%, #E6FFF2 100%);
				color: #09AB7A;
			}
			.loadingEight{
			    width: 200*2rpx;
			    height: 200*2rpx;
			    border-radius: 50%;
			    margin: 0 auto;
			    // margin-top:100*2rpx;
			    position: relative;
			    border:2*2rpx solid #8A8491;
			    -webkit-animation: turn 10s linear infinite;
				span{
				    display: inline-block;
				    width: 8*2rpx;
				    height: 5*2rpx;
				    border-radius: 50%;
				    background: #AEAEAE;
				    position: absolute;
				    left: 50%;
				    margin-top: -4*2rpx;
				    margin-left: -4*2rpx;
				}
				@-webkit-keyframes turn{
				    0%{
				        -webkit-transform: rotate(0deg);
				        border-color: #8A8491;
				    }
				    100%{
				        -webkit-transform: rotate(360deg);
				        border-color: #8A8491;
				    }
				}

			} 
		}
	}
	.fault-pre{
		width: 280*2rpx;
		height: 280*2rpx;
		// opacity: 0.2;
		border: 2*2rpx solid rgba(138, 132, 145, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.fault-com2{
			width: 240*2rpx;
			height: 240*2rpx;
			// opacity: 0.4;
			border: 2*2rpx solid rgba(138, 132, 145, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.fault-text{
				
				width: 114*2rpx;
				height: 114*2rpx;
				border: 3*2rpx solid #1A8DFF;
				// 1A8DFF
				background: linear-gradient(180deg, #6BB8FC 0%, #3299FE 100%);
				border-radius: 50%;
				position: absolute;
				left: 60*2rpx;
				top: 60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20*2rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #fff;
			}
			.loadingEight{
			    width: 200*2rpx;
			    height: 200*2rpx;
			    border-radius: 50%;
			    margin: 0 auto;
			    // margin-top:100*2rpx;
			    position: relative;
			    // border:2*2rpx solid #8A8491;
			    -webkit-animation: turn 10s linear infinite;
				span{
				    display: inline-block;
				    width: 8*2rpx;
				    height: 5*2rpx;
				    border-radius: 50%;
				    background: #AEAEAE;
				    position: absolute;
				    left: 50%;
				    margin-top: -4*2rpx;
				    margin-left: -4*2rpx;
				}
				@-webkit-keyframes turn{
				    0%{
				        -webkit-transform: rotate(0deg);
				        border-color: #8A8491;
				    }
				    100%{
				        -webkit-transform: rotate(360deg);
				        border-color: #8A8491;
				    }
				}
	
			} 
			
		}
	}
	.fault-charging{
		width: 280*2rpx;
		height: 280*2rpx;
		// opacity: 0.2;
		border: 2*2rpx solid rgba(138, 132, 145, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.fault-com2{
			width: 240*2rpx;
			height: 240*2rpx;
			// opacity: 0.4;
			border: 2*2rpx solid rgba(138, 132, 145, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			.fault-text{
				width: 114*2rpx;
				height: 114*2rpx;
				border: 3*2rpx solid #3ADEA2;
				z-index: 10;
				overflow: hidden;
				// 1A8DFF
				background: linear-gradient(180deg, #6BB8FC 0%, #3299FE 100%);
				border-radius: 50%;
				position: absolute;
				left: 60*2rpx;
				top: 60*2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20*2rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 550;
				color: #fff;
			}
			.loadingEight{
			    width: 200*2rpx;
			    height: 200*2rpx;
			    border-radius: 50%;
			    margin: 0 auto;
			    // margin-top:100*2rpx;
			    position: relative;
			    // border:2*2rpx solid #8A8491;
			    -webkit-animation: turn 10s linear infinite;
				span{
				    display: inline-block;
				    width: 8*2rpx;
				    height: 5*2rpx;
				    border-radius: 50%;
				    background: #AEAEAE;
				    position: absolute;
				    left: 50%;
				    margin-top: -4*2rpx;
				    margin-left: -4*2rpx;
				}
				@-webkit-keyframes turn{
				    0%{
				        -webkit-transform: rotate(0deg);
				        border-color: #8A8491;
				    }
				    100%{
				        -webkit-transform: rotate(360deg);
				        border-color: #8A8491;
				    }
				}
	
			} 
			
		}
	}
    .status-text {
    	position: absolute;
    	z-index: 980;
    	color: #fff;
    	font-size: 40rpx;
    	font-family: PingFangSC-Medium, PingFang SC;
    	font-weight: 550;
    }
</style>